<template>
  <div>
    <div class="image-block-box">
      <div class="material-Kinds">
        <div
          class="image-block-box-head-item"
          v-for="(img, index) in sucaiHead"
          :key="index"
        >
          <img width="100%" :src="img.imgUrl" alt="" />
        </div>
      </div>
      <div
        class="image-block-box-main"
        v-for="(li, index) in sucaiList"
        :key="index"
      >
        <div class="image-block-list-box">
          <div class="image-block-box-main-item-title">
            <div class="image-block-box-main-item-title-text">
              {{ li.title }}
            </div>
            <div class="image-block-box-main-item-title-more">
              <div class="image-block-box-main-item-title-more-text">更多</div>
              <div class="image-block-box-main-item-title-more-icon"></div>
            </div>
          </div>
          <swiper
            :options="swiperOption"
            ref="scSwiper"
            class="image-block-box-main-item-box"
          >
            <swiper-slide v-for="(item, index) in li.materials" :key="index">
              <div
                @click="addImage(item.imgUrl)"
                class="image-block-box-main-item-list-box-item-box material"
                style="width:80px;height:80px;"
              >
                <div class="leftPanel-common-results-item formal">
                  <div class="container-noStyle container-noStyle-new">
                    <img
                      :data-src="item.imgUrl + imgBottom"
                      class="swiper-lazy"
                      style="width: 100%;"
                    />
                    <div class="swiper-lazy-preloader"></div>
                  </div>
                  <div class="leftPanel-common-results-item-showMore"></div>
                </div>
              </div>
            </swiper-slide>

            <div slot="button-prev">
              <div
                class="swiper-button-next image-block-box-main-item-list-left leftRightIcon"
                style="display:none"
              >
                <i class="el-icon-caret-left"></i>
              </div>
            </div>

            <div slot="button-next">
              <div
                class="swiper-button-next image-block-box-main-item-list-right leftRightIcon"
                style="display:none"
              >
                <i class="el-icon-caret-right"></i>
              </div>
            </div>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import materialHead from "@/api/allData/materialData/AllMaterial";
import materialBoxList from "@/api/allData/materialData/getList";
export default {
  data() {
    return {
      imgBottom: "?x-oss-process=image/resize,w_300/format,webp",
      sucaiHead: materialHead,
      sucaiList: materialBoxList,
      swiperOption: {
        slidesPerView: 3, // 一行显示slider的个数
        slidesPerGroup: 3, // 定义slides的数量多少为一组
        lazy: true, //懒加载
        freeMode: true, //自由模式
        allowTouchMove: false, //禁止 拖动swiper
        navigation: {
          nextEl: ".image-block-box-main-item-list-right",
          prevEl: ".image-block-box-main-item-list-left"
        },
        observer: true,
        observeParents: true
      }
    };
  },
  computed: {},
  created() {
    console.log(this.addImage, "suCaiListsuCaiList");
  },
  methods: { ...mapActions(["addImage"]) }
};
</script>

<style lang="less" scoped>
@import "../../../styles/leftPanel/materials.less";

.image-block-box-main-item-box:hover {
  .image-block-box-main-item-list-right,
  .image-block-box-main-item-list-left {
    display: block !important;
  }
}
.leftRightIcon {
  line-height: 24px;
  text-align: center;
}
div:focus {
  outline: none;
}
</style>
